<template>
    <div class="content">
        <marquee :loop="false">
            <marquee-item v-for="item in list" :key="item.id" class="side">{{item}}</marquee-item>
        </marquee>
    </div>
</template>

<style>
    .side {
        height: 300px;
        background-color: #ff6a00;
        color: white;
        text-align: center;
        font-size: 30px;
    }
    .side:nth-child(2n){
        background-color: crimson;
    }
</style>

<script>
	import Marquee from './widget/Marquee.vue';
	import MarqueeItem from './widget/MarqueeItem.vue';

	export default {
		components: {
			MarqueeItem,
			Marquee
		},
		name: '',
        data () {
			return {
				list: 0
            }
        },
        mounted () {
			setTimeout(() => {
				this.list = 8
            }, 1000)
        }
	};
</script>
